<template>

    <div>
        <div style="background-color: whitesmoke">
            <!--            筛选部分    ===================================================================================================================-->
            <div style="margin: 10px 0">
                <el-row :gutter="20" style="height: 35px">
                    <el-col :span="6"><!-- 关键字 -->
                        <el-input placeholder="请输入内容关键字" suffix-icon="el-icon-search" class="selectInput" v-model="reqParam.searchContent" clearable :prefix-icon="Search"></el-input>
                    </el-col>
                    <el-col :span="6"><!-- 类型 -->
                        <el-select v-model="reqParam.type" class="selectInput" placeholder="全部" size="large">
                            <el-option
                                    v-for="item in typeMap.entries()"
                                    :key="item[0]"
                                    :label="item[1]"
                                    :value="item[0]"
                            />
                        </el-select>
                    </el-col>

                    <el-col :span="6"><!-- 起始时间 -->
                        <el-date-picker class="selectInput" style="margin: 10px;width: 100%" v-model="startTime" type="datetime" size="large" placeholder="选择起始时间"/>
                    </el-col>
                    <el-col :span="6"><!-- 结束时间 -->
                        <el-date-picker class="selectInput" style="margin: 10px;width: 100%" v-model="endTime" type="datetime" size="large" placeholder="选择结束时间"/>
                    </el-col>
                </el-row>
            </div>
            <div style="display: flex;float: left;margin-top: 80px;margin-left: 20px">
                <el-button class="el-icon-circle-plus-outline" type="primary" @click="getList(reqParam)">搜索</el-button>
                <el-button class="el-icon-circle-plus-outline" type="primary" @click="resetCondition()">重置筛选条件</el-button>
                <el-button type="primary">发布新帖<i class="el-icon-circle-plus-outline"></i></el-button>
            </div>
        </div>

        <!--            数据    ===================================================================================================================-->
        <ul id="list">
            <li v-for="item in dataList" class="liStyle">
                {{ item.title }}
                <!--             数据卡片   -->
            </li>

            <!--            分页工具    ===================================================================================================================-->
            <li class="liStyle">
                <div class="demo-pagination-block">
                    <el-pagination
                            v-model:current-page="pageNum"
                            v-model:page-size="pageSize"
                            :page-sizes="pageSizeList"
                            :small="true"
                            :disabled="false"
                            :background="true"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total"
                            style="float: right; margin-bottom: 10px"
                            @size-change="handleSizeChange()"
                            @current-change="handleCurrentChange()"
                    />
                </div>
            </li>
        </ul>
    </div>

</template>

<script setup>
import {ref} from "vue";
import {getPostList} from "@/api/request";
import {Search} from "@element-plus/icons-vue";

const pageNum = ref(1)
const pageSize = ref(10)
const pageSizeList = ref([10, 20, 30, 40])
const total = ref(0)
const startTime = ref("")
const endTime = ref("")
const loginUserId = ref("")
const loginUserName = ref("")

const typeMap = ref(new Map([
    ['1', "求助"],
    ['2', "教程"],
    ['3', "讨论"],
    ['4', "分享"],
    ['5', "其他"]
]))
const reqParam = ref({
    loginUserId: "",
    loginUserName: "",
    pageNum: 1,
    pageSize: 20,
    startTime: "",
    endTime: "",
    searchContent:""
})

function handleSizeChange() {
    // 再次请求
    getList(reqParam.value)
}
function handleCurrentChange() {
    getList(reqParam.value)
}
async function getList(req) {
    req.pageNum = pageNum.value
    req.pageSize = pageSize.value
    let param = reqParam.value
    req.searchContent = param.searchContent
    let resp = await getPostList(req, "/post/list");
    console.log(resp)
    dataList.value = resp.list
    total.value = resp.total
}

function resetCondition() {
    reqParam.value = {
        pageNum: 1,
        pageSize: 20,
        startTime: "",
        endTime: "",
        searchContent:""
    }
    pageNum.value = 1
    pageSize.value = 20
    getList(reqParam)
}

const dataList = ref([])

</script>

<style scoped>


.selectInput {
    margin: 10px;
    width: 100%;
    height: 25%;
}

#list {
    font-size: 1em;
}
.liStyle {
    padding: 0;
    align-self: center;
    align-content: center;
    background-color: gray;
    margin: 0;
    list-style: none;
    height: 50px;
    width: 100%;
    background-color: #d3d4d6;
    border-width: 3px;
    border-color: black;

}
.bottom-font {
    width: 100%;
    height: 80px;
    font-size: 10px;
    padding: 0;
}


</style>